<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { resumeInfoStore } from "@/stores/modules/resume.js";
import {deleteFile, getResumeFile} from "@/api/file.js";
import resumeBg from '@/assets/resumeBg.png'
import VueOfficePdf from '@vue-office/pdf'
import {DownloadOutlined,DeleteOutlined} from '@ant-design/icons-vue'
import PdfPreview from "@/components/PdfPreview.vue";

// 模拟从后端获取的数据
const fileList = ref(resumeInfoStore().resumeInfo);

const size = ref('large')
const hoveredId = ref(null);
const isModalVisible = ref(false);
const selectedIdToDelete = ref(null);
const previewUrl = ref('');
const fileType = ref('');
const pdfPreviewRef = ref(null);

// 获取文件列表数据（这里我们用模拟数据代替）
onMounted (() => {
   updateResume();
});

const updateResume = async () => {
  try {
    const res = await getResumeFile();
    if (res.data.code === 200) {
      resumeInfoStore().setResumeInfo(res.data.data);
    } else {
      message.error(res.data.message);
    }
  } catch (e) {
    message.error('出错了');
  }
};

// 文件点击预览
const onResumeInfo = async (file) => {
  try {
    pdfPreviewRef.value.togglePreview()
    fileType.value = 'pdf';
    previewUrl.value = file.filePath
  } catch (error) {
    message.error('文件预览失败: ' + error.message);
  }
};

const downloadFile = (file) => {
  // 获取文件的完整 URL
  const downloadUrl = file.filePath;

  // 创建一个临时链接
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = file.fileName || 'download'; // 设置下载的文件名
  document.body.appendChild(link);

  // 触发点击事件来下载文件
  link.click();

  // 下载完成后移除链接
  document.body.removeChild(link);
};

// 删除确认逻辑
const confirmDelete = async (id) => {
  selectedIdToDelete.value = id;
  isModalVisible.value = true;
};

const deleteResume = async () => {
  isModalVisible.value = false;
  const res = await deleteFile({
    fileId: selectedIdToDelete.value
  });
  if(res.data.code===200){
    message.success('删除成功');
    await updateResume();
  }else{
    message.error(res.data.message);
  }
};

const cancelDelete = () => {
  isModalVisible.value = false;
};
</script>

<template>
  <div class="resume-container">
    <a-row :gutter="16" v-if="fileList.length!==0">
      <a-col
          v-for="file in fileList"
          :key="file.filePath"
          :span="6"
      >
        <a-card
            class="resume-card"
            @mouseover="hoveredId = file.fileId"
            @mouseleave="hoveredId = null"
        >
          <template #cover>
            <a-image
                @click="onResumeInfo(file)"
                :height="180"
                :preview="false"
                alt="简历封面"
                :src="resumeBg"
                class="resume-cover"
            />
          </template>
          <div class="button-group-container">
            <a-card-meta :title="file.fileName"/>
            <div class="button-group" >
              <a-button
                  v-if="hoveredId === file.fileId"
                  danger
                  :size="size"
                  shape="circle"
                  @click="confirmDelete(file.fileId)">
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
              <a-button
                  type="primary"
                  v-if="hoveredId === file.fileId"
                  @click="downloadFile(file)"
                  shape="circle"
                  :size="size">
                <template #icon>
                  <DownloadOutlined />
                </template>
              </a-button>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 删除确认弹窗 -->
    <a-modal  v-model:open="isModalVisible" title="确认删除" @ok="deleteResume" @cancel="cancelDelete" ok-text="确认" cancel-text="取消">
      <p>确定要删除这个文件吗？</p>
    </a-modal>

    <!-- 文件预览 Modal   v-model:open="previewVisible" -->
    <PdfPreview ref="pdfPreviewRef" :previewUrl="previewUrl" :file-type="fileType"/>
    <a-empty v-if="fileList.length===0">
      暂无附件简历
    </a-empty>
  </div>
</template>

<style scoped>
.resume-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.resume-card {
  position: relative; /* 为子元素绝对定位提供参考 */
  transition: box-shadow 0.3s;
  cursor: pointer;
  margin: 10px 0;
}

.resume-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.button-group-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-group {
  position: absolute;
  display: flex;
  right: 0;
  width: 20%;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-20px);
}

.resume-cover {
  height: 180px;
  object-fit: cover;
}
</style>
